<template>
  <div>
    <div class="shuruk">
      <div class="inputone">
        <el-input
          class="xiaoqu"
          v-model="input1"
          placeholder="小区名称"
        ></el-input>
      </div>
      <div class="inputone">
        <el-input v-model="input2" placeholder="单元名称"></el-input>
      </div>
      <div class="block">
        <span class="demonstration"></span>
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="建设日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="jiancheng">
        <el-form ref="form" :model="form" label-width="80px">
          <el-select v-model="form.region" placeholder="选择状态">
            <el-option label="已建成" value="1"></el-option>
            <el-option label="未建成" value="2"></el-option>
          </el-select>
        </el-form>
      </div>
      <el-button
        class="sousuo"
        type="primary"
        icon="el-icon-search"
        circle
        @click="chaxun"
      ></el-button>
      <el-button @click="zhuanluru" class="anniu" type="success"
        ><i class="el-icon-circle-plus"></i>录入</el-button
      >
      <el-button @click="chongzhi" class="anniu" type="primary"
        ><i class="el-icon-refresh-left"></i>重置</el-button
      >
    </div>
    <div class="xiaoqu">
      <el-table
        :data="tableData"
        border
        style="width: 100%; text-algin: center"
        stripe
      >
        <el-table-column prop="communityname" label="小区名称">
        </el-table-column>
        <el-table-column prop="unitname" label="单位名称"> </el-table-column>
        <el-table-column prop="unitnum" label="栋数"> </el-table-column>
        <el-table-column prop="createtime" label="日期">
          <template slot-scope="scope">
            {{ formatDateTime(scope.row.createtime) }}
          </template>
        </el-table-column>
        <el-table-column prop="unitstatus" label="状态">
          <template slot-scope="scope">
            {{ scope.row.unitstatus === 1 ? "已建成" : "未建成" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >归档</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="blockk">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value2: "",
      input1: "",
      input2: "",
      form: {
        region: "",
      },
      tableData: [],
      total: 0,
      pageNum: 10,
      currPage: 1,
      token:
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjoiMjQ1MzMxNzM1N0BxcS5jb20iLCJoZWFkIjoiMjAyNTEwMjQwODUxMDY5ODE1MDEuanBnIiwidHlwZSI6IjEiLCJpYXQiOjE3NjEyNjczNzAsImV4cCI6MTc2MTM1Mzc3MH0.A0E_SV7tW8FDiihcwqm3nkCa2ae67-D9ADVXxDbJB2U",
    };
  },
  created() {
    this.getList();
    localStorage.setItem("token", this.token);
  },
  methods: {
    zhuanluru() {
      this.$router.push("/house/luru");
    },
    chongzhi() {
      this.input = "";
      this.input2 = "";
      this.form.region = "";
      this.value2 = "";
      this.getList();
    },
    chaxun() {
      const communityname = this.input1;
      const unitname = this.input2;
      const createDt = this.value2;
      const value = this.form.region;
      this.getchaxu(communityname, unitname, createDt, value);
    },
    async getchaxu(communityname, unitname, createDt, value) {
      let res = await this.$axios.get(
        `http://community.byesame.com/house/searchList?communityname=${communityname}&unitname=${unitname}&createDt=${createDt}&value=${value}&currPage=${
          this.currPage - 1
        }&pageNum=${this.pageNum}pag&token=${this.token}`
      );
      console.log(res);
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    async getdel(id) {
      let res = await this.$axios.get(
        `http://community.byesame.com/house/delunitList?id=${id}&token=${this.token}`
      );
      console.log("删除成功", res);
      this.getList();
    },
    formatDateTime(utcTime) {
      if (!utcTime) return "";
      const date = new Date(utcTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currPage = val;
      this.getList();
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.$router.push({
        path: "/house/xiangqing",
        query: { id: row.id },
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getdel(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async getList() {
      let res = await this.$axios.get(
        `http://community.byesame.com/house/gethouseList?pageNum=${
          this.pageNum
        }&currPage=${this.currPage - 1}`
      );
      console.log(res);
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
  },
};
</script>

<style scoped>
.shuruk .inputone {
  width: 15.625rem;
  display: inline-block;
  margin-left: 1.25rem;
}
/* .el-input__inner{
  width: 18.75rem;
} */
.block {
  display: inline-block;
  margin-left: 1.25rem;
}
.jiancheng {
  display: inline-block;
  margin-left: 1.25rem;
}
.el-button--small.is-circle {
  padding: 0.75rem 3.125rem;
  border-radius: 0.5rem;
  margin-left: 10.375rem;
  margin-right: 0.125rem;
}
.anniu {
  width: 6.25rem;
  height: 2.5rem;
  /* line-height: 3.125rem; */
  margin-left: 1.875rem;
}
.xiaoqu {
  text-align: center;
  margin-top: 1.875rem;
}
.blockk {
  /* text-align: right; */
  float: right;
  margin-top: 1.875rem;
}
</style>